<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>咨询师管理</title>
</head>

<link rel="shortcut icon" href="../../static/favicon.ico"
      th:href="@{/static/favicon.ico}">
<link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
      th:href="@{/static/css/bootstrap.min.css(v=3.3.6) }">
<link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"
      th:href="@{/static/css/font-awesome.css(v=4.4.0) }">
<link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"
      th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css }">
<link href="../../static/css/animate.css" rel="stylesheet"
      th:href="@{/static/css/animate.css }">
<link href="../../static/css/style.css?v=4.1.0" rel="stylesheet"
      th:href="@{/static/css/style.css(v=4.1.0) }">
<!-- 弹出框插件 -->
<link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"
      th:href="@{/static/css/plugins/sweetalert/sweetalert.css }">
<!--时间控件-->
<link href="../../static/public/user/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
      th:href="@{/static/public/user/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
      rel="stylesheet">
<!--滑动按钮-->
<link href="../../static/css/plugins/switchery/switchery.css"
      th:href="@{/static/css/plugins/switchery/switchery.css}" rel="stylesheet">

<link href="../../static/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
      th:href="@{/static/css/plugins/treeview/bootstrap-treeview.css }">
<style type="text/css">
    .table > thead > tr > th    {
        color: #2a62bc;
    }
    .form-inline>.btn:not(.query){
        margin-left: 0.8%;
        float: right;
    }
</style>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-title">
        <div class="row row-lg">
            <div class="col-sm-12">
                <form class="form-inline" id="advisor_query">
                    <div class="form-group">
                        <label for="exampleInputUserName">咨询师编号:</label>
                        <input type="text" name="stuId" class="form-control" id="exampleInputUserName">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputName">咨询师姓名:</label>
                        <input type="text" name="name" class="form-control" id="exampleInputName">
                    </div>
                    <button  class="btn btn-success query" type="button">查询</button>
                    <button class="btn btn-danger deleteAll" type="button">删除</button>
                    <button class="btn btn-info" type="button" data-toggle="modal" data-target="#modal_add">添加</button>
                    <button class="btn btn-primary export" type="button">导出</button>
                </form>
                <table id="tb_departments_1"></table>
            </div>

        </div>
    </div>


</div>
<!--添加-->
<div class="modal  fade" id="modal_add" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加咨询师</h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal" id="form_add">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            姓名</label>
                        <div class="col-sm-8">
                            <input type="text" name="name" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            手机</label>
                        <div class="col-sm-8">
                            <input type="text" name="phone" class="form-control" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            邮箱</label>
                        <div class="col-sm-8">
                            <input type="email" name="email" class="form-control" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            密码</label>
                        <div class="col-sm-8">
                            <input type="password" name="password" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            有效期</label>
                        <div class="col-sm-8">
                            <input type="text" name="lastLandingTime" class="form-control myData_add" placeholder="请输入截至日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">审核状态</label>
                        <div class="col-sm-6">
                            <input type="checkbox" name="startUsing" class="js-switch form-control"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            性别</label>
                        <div class="col-sm-8">
                            <label class="control-label">
                                <input type="radio" checked="checked" value="option1" name="sex">
                                <span>男</span>
                            </label>&nbsp;&nbsp;

                            <label class="control-label">
                                <input type="radio" value="option2" name="sex">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            用户描述</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="describe" rows="4"></textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary add">保存</button>
            </div>
        </div>
    </div>
</div>
<!--修改-->
<div class="modal  fade" id="modal_modification" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal" id="form_modification">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            姓名</label>
                        <div class="col-sm-8">
                            <input type="text" name="name" disabled="" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            手机</label>
                        <div class="col-sm-8">
                            <input type="text" name="phone" class="form-control" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            邮箱</label>
                        <div class="col-sm-8">
                            <input type="email" name="email" class="form-control" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            密码</label>
                        <div class="col-sm-8">
                            <input type="password" name="password" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            有效期</label>
                        <div class="col-sm-8">
                            <input type="text" name="lastLandingTime" class="form-control myData_add" placeholder="请输入截至日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">审核状态</label>
                        <div class="col-sm-6">
                            <input type="checkbox" name="startUsing" class="js-switch form-control"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            性别</label>
                        <div class="col-sm-8">
                            <label class="control-label">
                                <input type="radio" checked="checked" value="男" name="sex">
                                <span>男</span>
                            </label>&nbsp;&nbsp;

                            <label class="control-label">
                                <input type="radio" value="女" name="sex">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            用户描述</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="describe" rows="4"></textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary modification" >保存</button>
            </div>
        </div>
    </div>
</div>
<!--分配用户组-->
<div class="modal  fade" id="modal_allocation" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">分配用户组</h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal" id="form_allocation">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            用户名</label>
                        <div class="col-sm-8">
                            <input type="text" name="userName" disabled="" class="form-control" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            分配用户组</label>
                        <div class="col-sm-8">
                            <div class="ibox-content">
                                <div class="treeview_allocation"></div>
                            </div>
                        </div>
                    </div>



                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary allocation">分配</button>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4"
        th:src="@{/static/js/jquery.min.js(v=2.1.4) }"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6"
        th:src="@{/static/js/bootstrap.min.js(v=3.3.6) }"></script>
<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0"
        th:src="@{/static/js/content.js(v=1.0.0) }"></script>
<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js }"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js }"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js }"></script>
<!-- 弹出框插件 -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js }"></script>
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<!--滑动按钮-->
<script src="../../static/js/plugins/switchery/switchery.js"
        th:src="@{/static/js/plugins/switchery/switchery.js}"></script>
<!-- 时间控件 -->
<script src="../../static/public/user/bootstrap-datetimepicker/bootstrap-datetimepicker.js"
        th:src="@{/static/public/user/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script src="../../static/public/user/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        th:src="@{/static/public/user/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script src="../../static/public/user/timeAllocation.js"
        th:src="@{/static/public/user/timeAllocation.js }"></script>
<!-- 树形控件 -->
<script src="../../static/js/plugins/treeview/bootstrap-treeview.min.js"
        th:src="@{/static/js/plugins/treeview/bootstrap-treeview.min.js}"></script>
<script src="../../static/public/user/treeCheckBox.js"
        th:src="@{/static/public/user/treeCheckBox.js }"></script>
<!--自定义js---表格操作-->
<script src="../../static/public/exam/tableOperation.js"
        th:src="@{/static/public/exam/tableOperation.js}"></script>
<!--树形控制-->
<script>
    $(function () {
        let $treevie = $('.treeview_allocation');
        let url = "../../static/js/demo/user/user_treeCheck_test.json";
        initCheckTree($treevie,url);
    });

</script>
<!--滑动按钮大小控制-->
<script>
    //页面如何有多个互动按钮必须需要这些js代码
    var switchery;
    let elems =Array.prototype.slice.call($('.js-switch'));
    elems.forEach(function(html) {
        /* size: 'normal' 控制大小*/
        switchery = new Switchery(html);
        html.onchange = function () {
            alert(html.checked);
        }
    });
</script>
<!--表单数据-->
<script>
    $(function () {
        //1.初始化Table
        TableInit().Init();
        $('.deleteAll').click(function () {
          deleteAllRecords("",'#tb_departments_1');
        });

        $('.query').click(function () {
            let dataList = new Array('stuId','name');
            queryRecords('form[id="advisor_query"]',dataList);
        });

        /*添加提交表单*/
        $('.add').click(function () {
            $('#form_add').submit();
        });
        /*修改提交表单*/
        $('.modification').click(function () {
            $('#form_modification').submit();
        });
        /*分配角色*/
        $('.allocation').click(function () {
            $('#form_allocation').submit();
        });

        /*导出按钮操作*/
        $('.export').click(function () {
            exportRecord("","咨询师信息")
        });
    });
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments_1').bootstrapTable({
                url: '../../static/js/demo/user/adminListTest.json',       //请求后台的URL（*）
                // method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                minimumCountColumns: 2,             //最少允许的列数
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                onPostBody:switchInit,
                columns: [{
                    checkbox: true
                }, {
                    field: 'stuId',
                    title: '编号'
                }, {
                    field: 'name',
                    title: '姓名'
                }, {
                    field: 'sex',
                    title: '性别'
                }, {
                    field: 'phone',
                    title: '手机'
                }, {
                    field: 'email',
                    title: '邮箱'
                }, {
                    field: 'startUsing',
                    title: '有效状态',
                    formatter:addSlideChoiceBox,
                }, {
                    field: 'lastLandingTime',
                    title: '最后登陆时间'
                },{
                    field: 'operate',
                    title: '操作',
                    width: 150,
                    formatter: addFunctionAlty,//表格中增加按钮  
                    events:{
                        'click button[title=删除]':function (e,value,row,index) {
                          deleteRecord(e,value,row,index,"",'#tb_departments_1');
                        },
                        'click button[title=修改]':function (e,value,row,index) {
                            //回显数据
                            echoDataForm('form[id="form_modification"]',new Array(
                                'userName','name','phone','email','lastLandingTime','major',
                                [switchery,'startUsing','sweetalert'],["sex","sex"],'customerBelongs'
                            ),row)
                            $('#modal_modification').modal();
                        },
                        'click button[title=分配用户组]':function (e,value,row,index) {
                            //回显数据
                            $('form[id="form_allocation"] input[name="userName"]').val(row.userName);
                            $('#modal_allocation').modal();
                        },
                    }

                }]
            });
        };

        /*滑动按钮初始化*/
        let switchInit = function () {
            //页面如何有多个互动按钮必须需要这些js代码
            let elems =Array.prototype.slice.call($('.js-switch-1'));
            elems.forEach(function(html) {
                /* size: 'normal' 控制大小*/
                var switchery = new Switchery(html);
                html.onchange = function () {
                    alert(html.checked);
                }
            });
        }

        function addSlideChoiceBox(value, row, index) {
            if(value == '启用'){
                return ' <input type="checkbox" class="js-switch-1 form-control" checked/>'}
            if(value == '不启用'){
                return ' <input type="checkbox" class="js-switch-1 form-control"/>'}
        }

        function addFunctionAlty(value, row, index) {
            return '<button id = "+id+" type = "button" class = "btn btn-white" title="修改" ' +
                '> <i class="glyphicon glyphicon-edit"/> </button>' +
                '<button id = "+id+" type = "button" class = "btn btn-white" title="删除"> <i class="glyphicon glyphicon-trash text-danger"/> </button>'+
                '<button id = "+id+" type = "button" class = "btn btn-white" title="分配用户组"' +
                ' > <i class="glyphicon glyphicon-share text-success"/> </button>'
                ;
        }

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };

</script>
<!--时间控制-->
<script>
        /*时间控件配置*/
        $(function () {
            /*时间控件配置*/
            let object = '.form-control.myData_add';
           timeAllocationForTime(object);
        });
</script>
</html>